<template>
  <el-select
    v-model="value"
    @change="changeSelect"
    :multiple="props.multiple"
    placeholder="请选择"
    clearable
    :style="`width: ${props.width}`"
  >
    <el-option
      v-for="item in roleList"
      :key="item.roleId"
      :label="item.name"
      :value="item.roleId"
    />
  </el-select>
</template>

<script lang="ts" setup>
import {ref, watch} from "vue";
import { getAllRole } from "@/api/role"
import * as instance from '@/api/role/types/instance'
  interface Props {
    modelValue?: string|number
    multiple?: boolean
    width?: string
  }
  const emit = defineEmits(['update:modelValue'])
  const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    multiple: false,
    width: '200px'
  })
  const value = ref<any>(props.modelValue)
  const roleList = ref<Array<instance.roleRowFormInstance>>([])

  const getRoleList = () => {
    getAllRole().then((res: any)=> {
      roleList.value = res
    })
  }

  const changeSelect = () => {
    emit('update:modelValue',value.value)
  }

  getRoleList()

  watch(
    () => props.modelValue,
    (newVal, oldVal) => {
      value.value = newVal
    }
  )
</script>

<style lang="scss" scoped>
.red{
  background-color: var(--el-color-primary);
  color: white;
}
.icon-select-main{
  display: flex;
  flex-wrap: wrap;
  height:400px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
</style>


